<template>
	<view>
		<!-- 全屏加载 -->
		<cover-bulr-bg v-if="coverBulr"></cover-bulr-bg>

		<view class="centem-body" v-else>
			<!-- 顶部图片 -->
			<view class="data-clerk">
				<view class="data-clerk-text">
					<view class="data-clerk-text-h">
						休戚与共
					</view>
					<view class="data-clerk-text-w">
						吾与元规休戚是同，悠悠之谈，宜绝智者之口
					</view>
				</view>
				<view class="data-img">
					<image class="fengrui-img" src="../../static/down/key-img.svg" mode="scaleToFill"></image>
				</view>
			</view>

			<!-- 订阅消息-->
			<block v-if="wxSet.if_subscribe == 1">
				<view class="down-view-all content-card" v-if="wxSet.if_subscribe_popup != 1">
					<view class="">
						我们正式邀请您订阅成为我们的订阅嘉宾，一手最新消息
					</view>
					<view class="fr-btn down-subscribe-btn" @tap="showSubscribeMessage()">
						<i class="animation"></i>订阅最新内容<i class="animation"></i>
					</view>
				</view>
			</block>

			<!-- 激励视频下载附件样式 -->
			<block v-if="isShowDown == true">
				<view class="down-view-all">
					<view class="down-user">
						<view class="down-user-img">
							<image class="fengrui-img" src="../../static/my/user.png" mode="aspectFill"></image>
						</view>
						<view class="down-user-name">
							卡密获取
						</view>
					</view>
					<button class="down-btn-video" @tap="videoAD()">
						<view class="down-btn-video-icon">
							<image class="fengrui-img" src="../../static/data/ad_video.svg" mode=""></image>
						</view>
						获取卡密（需观看 {{ ad_number }} 次广告）
					</button>
				</view>
			</block>


			<!-- 下载附件内容 -->
			<block v-else>
				<!-- 附件下载方式为复制链接 -->
				<view class="down-view-all">
					<view class="down-user">
						<view class="down-user-img">
							<image class="fengrui-img" src="../../static/my/user.png" mode="aspectFill"></image>
						</view>
						<view class="down-user-name">
							卡密获取
						</view>
					</view>
					<view class="down-network-view">
						<text user-select="true">
							{{ decodedCardCode }}
						</text>
					</view>
					<view class="down-list-btn-text">
						<span class="que-user-red">*</span>
						长按链接手动复制
					</view>
				</view>
			</block>

			<!-- 判断微信流量主 -->
			<!-- #ifdef MP-WEIXIN -->
			<block v-if="wxSet.wx_video != ''">
				<view class="" style="margin: 30rpx 30rpx;">
					<ad :unit-id="wxSet.wx_video" ad-type="video" ad-theme="white"></ad>
				</view>
			</block>

			<!-- 其他平台 -->
			<view class="down-view-all">
				<view class="titel-h">
					其他平台
				</view>
				<view class="down-li-toew">
					<button class="down-icon-list-btn" open-type="contact" show-message-card="true">
						<view class="down-icon-list-img">
							<image class="fengrui-img" src="../../static/my/customer.svg" mode="aspectFit">
							</image>
						</view>
						<view class="down-icon-list-img-title ma-top-0">
							客服
						</view>
					</button>

					<button class="down-icon-list-btn" open-type="share">
						<view class="down-icon-list-img">
							<image class="fengrui-img" src="../../static/data/share.svg" mode="aspectFit">
							</image>
						</view>
						<view class="down-icon-list-img-title ma-top-0">分享</view>
					</button>
				</view>
			</view>
			<!-- #endif -->
		</view>

		<!-- 卡密说明 -->
		<view class="down-view-all">
			<view class="titel-h">
				卡密说明
			</view>
			<!-- 正文内容 -->
			<view class="data-view">
				<mp-html :tag-style="tag_style" :content="wxSet.key_step" :css="backendStyle"
					:container-style="container_style" :copy-link="copyLink" selectable="true"> 内容疯狂加载ing...</mp-html>
			</view>
		</view>
	</view>
</template>

<script>
// 获取应用实例
const app = getApp()
import * as API from "../../utils/api";
import mpHtml from '@/components/mp-html/mp-html';
// 导入订阅消息工具类
import SubscribeMessage from '@/utils/subscribeMessage';
let rewardedVideoAd = null;
export default {
	components: {
		mpHtml
	},
	data() {
		return {
			// 页面路径
			posUrl: '',
			// 基本配置
			wxSet: [],
			launchScene: 0, //微信小程序场景值
			// 是否显示内容
			isShowDown: true,
			coverBulr: false,
			decodedCardCode: '',

			// 文本框解析
			tag_style: {
				h1: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
				h2: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
				h3: 'border-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
				h4: 'lborder-top:1px solid rgb(0 0 141 / 12%);margin:48px 0 16px;padding-top:24px;letter-spacing:-.02em;line-height:32px',
			},
			container_style: 'font-size:15px;overflow-x: hidden;line-height:30px;letter-spacing:1px',
			copyLink: false,
			backendStyle: '.yinfengrui{ color: purple; }',

			ad_number: 1, //广告次数
			keyNumber: 0, //卡密次数
			postDaySum: 0,//当前时间戳
			keyDayNumber: 0,

			// 消息订阅
			templateId: '',
			openID: '',
			statusMessage: '',

		}
	},
	// 分享好友配置
	onLoad(posID) {
		// 获取当前时间戳
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1; // 月份从 0 开始，需加 1
		const day = now.getDate();
		const postDaySum = year + month + day;
		this.postDaySum = postDaySum;

		// 当前时间戳是否和缓存中一致，如果不一致清除卡密次数缓存
		var keyDaySum = uni.getStorageSync('keyDaySum') || 0;
		// 修正：如果缓存的日期与当前日期不同，清除卡密次数缓存
		if (keyDaySum && keyDaySum != this.postDaySum) {
			uni.removeStorageSync('keyDayNumber');
			console.log('清除过期的卡密次数缓存');
		}

		// 初始化卡密次数
		this.keyDayNumber = uni.getStorageSync('keyDayNumber') || 0;
		this.keyNumber = this.keyDayNumber; // 同步keyNumber和keyDayNumber
		if (!keyDaySum || keyDaySum != this.postDaySum) {
			uni.removeStorageSync('keyDayNumber');
			console.log(11)
		}


		// 接受数据
		this.posUrl = 'pages/key/key';

		if (app.globalData.wxSet == '') {
			//（解决异步）
			app.on('wxSet', this.changeToken.bind(this));
		} else {
			this.wxSet = app.globalData.wxSet;
			this.launchScene = app.globalData.launchScene; //微信小程序场景值
			this.ad_number = this.wxSet.key_ad_number || 1;
			this.starpAd();
		}

		// 微信分享盆友圈
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		})
	},
	onShareAppMessage(res) {
		if (res.from === 'button') { // 来自页面内分享按钮
			console.log(res.target)
		}
		return {
			title: '获取卡密',
			imageUrl: this.wxSet.share_title_url,
			path: '/pages/key/key'
		}
	},
	// 文章分享盆友圈 目前支持安卓
	onShareTimeline(res) {
		return {
			title: '获取卡密',
			imageUrl: this.wxSet.share_title_url,
			path: '/pages/key/key'
		}

	},

	methods: {
		//（解决异步）
		changeToken() {
			this.wxSet = app.globalData.wxSet;
			this.launchScene = app.globalData.launchScene; //微信小程序场景值
			this.ad_number = this.wxSet.key_ad_number || 1;
			this.starpAd();
		},

		// 初始化广告
		starpAd() {
			if (this.wxSet.if_subscribe == 1) { // 判断是否开启订阅消息
				API.getSubscribeTemplate().then((res) => {
					this.templateId = res.data.template_id;
					if (this.wxSet.if_subscribe_popup == 1) {
						setTimeout(() => {
							this.showSubscribeMessage();
						}, 1500);
					}
				})
			}

			if (this.wxSet.wx_jili_video != '' && this.wxSet.key_ad == '1') {
				this.CreateAd();
			} else {
				this.isShowDown = false;
				this.postKey();
			}

		},
		postKey() {
			// 卡密次数
			var keyDayNumber = uni.getStorageSync('keyDayNumber') || 99;
			if (keyDayNumber == this.wxSet.key_ad_number) {
				uni.showModal({
					title: "提示",
					content: "今日卡密次数上限，请明日再获取"
				})
				this.decodedCardCode = "今日卡密次数上限，请明日再获取";
				return;
			}

			API.postKeyApi().then((res) => {
				if (res.data.success == true) {
					const buffer = wx.base64ToArrayBuffer(res.data.card_code);
					this.decodedCardCode = String.fromCharCode.apply(null, new Uint8Array(buffer));

					// 卡密次数增加
					this.keyNumber = Number(this.keyNumber) + 1;
					uni.setStorageSync('keyDayNumber', this.keyNumber);// 缓存卡密次数
					// 缓存今日时间戳
					uni.setStorageSync('keyDaySum', this.postDaySum);// 缓存今日时间戳

					if (this.wxSet.if_subscribe_popup == 1 && this.wxSet.if_subscribe == 1) {
						setTimeout(() => {
							this.showSubscribeMessage();
						}, 1500);
					}

				} else if (res.statusCode != 200) {
					uni.showToast({
						title: '没有卡密或API错误',
						icon: "none"
					})
					this.decodedCardCode = "没有卡密或API错误，请联系管理员";
				} else {
					uni.showToast({
						title: res.data.error,
						icon: "none"
					})
					this.decodedCardCode = res.data.error;
				}
				this.isShowDown = false;
			})
		},
		//初始化激励视频广告组件
		CreateAd() {
			if (this.wxSet.wx_jili_video != '') {
				if (wx.createRewardedVideoAd) {
					this.videoAd = wx.createRewardedVideoAd({
						adUnitId: this.wxSet.wx_jili_video
					})
					this.videoAd.onLoad(() => { })
					this.videoAd.onError((err) => {
						// console.log(err)
						// 播放错误下发奖励
						this.postKey();
						
						// 卡密次数增加
						this.keyNumber = Number(this.keyNumber) + 1;
						uni.setStorageSync('keyDayNumber', this.keyNumber);// 缓存卡密次数
						// 缓存今日时间戳
						uni.setStorageSync('keyDaySum', this.postDaySum);// 缓存今日时间戳
						
						if (this.wxSet.if_subscribe_popup == 1 && this.wxSet.if_subscribe == 1) {
							setTimeout(() => {
								this.showSubscribeMessage();
							}, 1500);
						}
					})
					this.videoAd.onClose((res) => {
						if (res && res.isEnded) {
							uni.showToast({
								icon: 'none',
								title: "感谢您的支持"
							})

							// 观看广告后减少次数
							this.ad_number--;
							if (this.ad_number <= 0) {
								this.postKey();
							}

							// 卡密次数增加
							this.keyNumber = Number(this.keyNumber) + 1;
							uni.setStorageSync('keyDayNumber', this.keyNumber);// 缓存卡密次数
							// 缓存今日时间戳
							uni.setStorageSync('keyDaySum', this.postDaySum);// 缓存今日时间戳

							if (this.wxSet.if_subscribe_popup == 1 && this.wxSet.if_subscribe == 1) {
								setTimeout(() => {
									this.showSubscribeMessage();
								}, 1500);
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: "中途关闭广告"
							})
						}
					})
				}

			}
		},

		// 流量主视频弹窗
		videoAD() {
			if (this.launchScene == 1154) {
				uni.showToast({
					title: '请前往小程序使用完整服务',
					icon: "none"
				})
				return;
			}
			this.getVideoAd();
		},

		// 激励视频
		getVideoAd() {
			// 用户触发广告后，显示激励视频广告
			if (this.videoAd) {
				this.videoAd.show().catch(() => {
					// 失败重试
					this.videoAd.load()
						.then(() => this.videoAd.show())
						.catch(err => {
							console.log('激励视频', err)
							// this.isShowDown = false;
						})
				})
			}
		},

		// 左上角返回按钮
		tarBlack: function () {
			// 建立页面栈 如果是1则是分享打开需要返回主页，大于1则返回上一级
			var selPage = getCurrentPages();
			// console.log(selPage.length)
			if (selPage.length == 1) {
				uni.switchTab({
					url: "../index/index"
				})
			} else {
				uni.navigateBack({
					delta: 1
				});
			}
		},

		// 弹窗订阅
		showSubscribeMessage() {
			SubscribeMessage.showSubscribeMessage(this.templateId, () => {
				// 订阅成功后的回调处理
				this.statusMessage = '订阅成功！';
			});
		},
	}
}
</script>

<style>
.data-view {
	margin: 20rpx 20rpx;
	font-size: 34rpx;
	color: #333232;
	line-height: 60rpx;
	word-wrap: break-word;
}

/* 关注微信公众号 */
.que-user-red {
	color: red;
}

.account-aout {
	margin-left: 30rpx;
}

.account-btn {
	height: 60rpx;
	background-color: #1c262a;
	border-radius: 200rpx;
	font-size: 24rpx;
	width: 150rpx;
	color: #FFFFFF;
	flex-shrink: 0;
	margin-right: 0rpx;
}

.account-describe {
	font-size: 20rpx;
	color: #7c7c7c;
}

.account-img {
	height: 80rpx;
	width: 80rpx;
	border-radius: 200rpx;
	overflow: hidden;
}

.account-flex {
	display: flex;
}

.account-view {
	background-color: #f9f9f9;
	border-radius: 40rpx;
	height: 120rpx;
	margin: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18rpx 30rpx;
}

/* 密码访问 */
.password-title {
	margin: 20rpx 0;
	font-weight: bold;
	font-size: 36rpx;
	text-align: center;
}

.password-desrc {
	width: 70%;
	margin: auto;
	text-align: center;
	font-size: 28rpx;
	color: #929292;
}

.password-position {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -60%);
}

.password-icon {
	height: 500rpx;
	width: 100%;
	overflow: hidden;
}

/* 加载动画 */
.data-login {
	height: 70rpx;
	width: 70rpx;
	margin: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.data-login-flex {
	position: fixed;
	top: 0%;
	left: 0%;
	height: 100%;
	width: 100%;
	z-index: 1030;
	background-color: #f7f7f7;
}

.down-view-ruan {
	color: #23c1aa;
	margin-right: 14rpx;
	flex-shrink: 0;
}

.down-view-title {
	display: flex;
}

.down-view-title-dscr {
	padding: 14rpx 36rpx 30rpx 46rpx;
	color: #B2B2B2;
	font-size: 24rpx;
}

.down-icon-list-btn {
	text-align: center;
	margin: 0;
	background-color: unset;
	padding: 0;
}

.down-li-toew {
	display: flex;
	margin-top: 60rpx;
	align-items: center;
	border-radius: 40rpx;
	justify-content: space-around;
}

.down-icon-list {
	text-align: center;
}

.down-icon-list-img {
	height: 60rpx;
	width: 60rpx;
	overflow: hidden;
	margin: auto;
}

.down-icon-list-img-title {
	font-size: 22rpx;
	color: #b1b1b1;
	margin-top: 12rpx;
}

.down-li-toew-ma {
	margin: 40rpx 0rpx 20rpx 0rpx;
}

/* 说明 */
.que-user-red {
	color: red;
}

.list-btn {
	height: 50rpx;
	width: 160rpx;
	background-color: #007AFF;
	border-radius: 100rpx;
	text-align: center;
	color: #FFFFFF;
	line-height: 50rpx;
	bottom: 0rpx;
	position: absolute;
	right: 0;
}

/* 列表 */
.list-li-left-describe {
	color: #D5D5D5;
	font-size: 26rpx;
	position: absolute;
	top: 0rpx;
	left: 0rpx;
}

.list-li-tag {
	color: #0BBDA6;
	font-size: 20rpx;
}

.list-li-left-h {
	font-size: 36rpx;
}

.list-li-left {
	margin-left: 32rpx;
	flex-grow: 1;
	height: 120rpx;
	position: relative;
}

.list-img {
	height: 120rpx;
	width: 140rpx;
	border-radius: 14rpx;
	overflow: hidden;
	flex-shrink: 0;
}

.list-li {
	display: flex;
	margin-top: 60rpx;
	align-items: center;
	background-color: #fff;
	/* padding: 24rpx; */
	border-radius: 40rpx;
}

/* 百度网盘下载 */
.down-btn {
	background-color: #007AFF !important;
	color: #FFFFFF !important;
	border-radius: 100rpx !important;
	width: 100%;
	margin: 0rpx 10rpx;
	font-size: 28rpx;
	line-height: 80rpx;
	height: 80rpx;
}

.down-btn-video {
	background-color: #007AFF !important;
	color: #FFFFFF !important;
	border-radius: 100rpx !important;
	width: 80%;
	margin: auto;
	font-size: 28rpx;
	line-height: 80rpx;
	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 60rpx;
}

.down-btn-video-icon {
	height: 46rpx;
	width: 56rpx;
	margin-top: -6rpx;
	margin-right: 8rpx;
}

.down-btn-key {
	background-color: #23c1aa !important;
	color: #FFFFFF !important;
	border-radius: 100rpx !important;
	width: 100%;
	margin: 0rpx 10rpx;
	font-size: 28rpx;
	line-height: 80rpx;
	height: 80rpx;
}

.down-list-btn-text {
	font-size: 22rpx;
	margin-top: 20rpx;
	color: #B2B2B2;
}

.down-list-btn {
	display: flex;
	align-items: center;
	margin-bottom: 10rpx;
	margin-top: 22rpx;
	overflow: hidden;
}

.down-network-icon {
	width: 150rpx;
	background-color: #EFEFEF;
	border-radius: 10rpx;
	height: 130rpx;
	margin-left: 20rpx;
	overflow: hidden;
	flex-shrink: 0;
	line-height: 130rpx;
	margin: auto;
}

.down-network-view {
	padding: 30rpx 0rpx;
	background-color: #EFEFEF;
	border-radius: 10rpx;
	padding: 30rpx;
	color: #B2B2B2;
	font-size: 24rpx;
	word-break: break-all;
}

.down-user-name {
	margin-left: 20rpx;
	font-size: 32rpx;
}

.down-user-img {
	height: 60rpx;
	width: 60rpx;
	overflow: hidden;
	border-radius: 200rpx;
}

.down-user {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	justify-content: flex-start;
	overflow: hidden;
}

.down-file {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 70rpx 0;
}

.down_file_icon {
	height: 44rpx;
	width: 44rpx;
	opacity: 0.5;
	overflow: hidden;
}

.down_file_icon_index {
	height: 80rpx;
	width: 80rpx;
	opacity: 1;
	overflow: hidden;
}

.down-file-txt {
	margin: 14rpx 0;
	font-size: 28rpx;
	color: #B2B2B2;
}

.self-user-updata {
	width: 50rpx;
	height: 50rpx;
	position: absolute;
	right: 76rpx;
}

/* 顶部图片 */
.data-clerk-text-w {
	font-size: 24rpx;
	color: #b1b1b1;
}

.data-clerk-text-h {
	font-size: 40rpx;
	margin-bottom: 20rpx;
}

.data-clerk-text {
	width: 360rpx;
	position: absolute;
	top: 80rpx;
	left: 40rpx;
}

.data-clerk {
	width: 100%;
	height: 300rpx;
	position: relative;
}

.data-img {
	height: 300rpx;
	width: 360rpx;
	overflow: hidden;
	position: absolute;
	bottom: 0rpx;
	right: 0rpx;
}

/* 全局 */
.titel-h {
	font-size: 34rpx;
	position: relative;
	margin-bottom: 10rpx;
}

/* .titel-h:after {
		content: '';
		position: absolute;
		bottom: -14rpx;
		left: 0px;
		width: 96rpx;
		height: 8rpx;
		border-radius: 200rpx;
		background: linear-gradient(90deg, rgba(55, 110, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);
	} */

.down-view-all {
	background-color: #FFFFFF;
	border-radius: 40rpx;
	padding: 38rpx;
	margin: 38rpx;
}

.fengrui-img {
	height: 100%;
	width: 100%;
}

page {
	background-color: #F7F7F7;
}

.centem-body {
	/* background-image: linear-gradient(#3482e2, #F7F7F7); */
}

button:after {
	border: 0px solid rgba(0, 0, 0, .2);
}

.down-subscribe-btn {
	width: 100%;
	margin-top: 28rpx;
}

/* 暗黑模式下应用的样式 */
@media (prefers-color-scheme: dark) {

	page,
	.data-login-flex {
		background: #161616;
	}

	.down-view-all,
	.account-view,
	.list-li {
		background-color: #202020;
	}

	.down-network-view,
	.account-btn,
	.down-network-icon {
		background-color: #797979;
	}
}
</style>